<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('首页')"/>
</head>
<!--<script type="text/javascript">-->
<!--function getmkid(obj) {-->
<!--var input1 = $(obj).val();-->
<!--alert(input1)-->
<!--}-->
<!--</script>-->
<style type="text/css">
    .panel-mdz {
        border-color: #00b2f7;
    }

    .panel-mdz > .panel-heading {
        color: #ffffff;
        background-color: #00b2f7;
        border-color: #d6e9c6;
    }
    table {
        table-layout:fixed;
    }
    table td{
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    table td:hover {
        overflow: auto;
        white-space: pre-wrap;
    }
    .panel-mdz > .panel-heading + .panel-collapse .panel-body {
        border-top-color: #d6e9c6;
    }

    .panel-mdz > .panel-footer + .panel-collapse .panel-body {
        border-bottom-color: #d6e9c6;
    }
    .like {
        margin-right: 10px;
    }
    .container-div {
        margin-top:-50px;
        margin-right: 10px;
        margin-left: 10px;
    }
    #error_box{
        height:40px;
        width:350px;
        margin:0 auto;
        line-height:40px;
        color:#fc4343;
    }
</style>
<script type="text/javascript">
    //点击编辑按钮弹出模态框的回显。
    function updatetjmtk(obj) {
        var id = obj.getAttribute("id");
        $.ajax({
            url: "/nc/sysNc/getsysnc/" + id,
            type: 'GET',
            success: function (result) {
//console.log(retult);
                $("#empUpdateModal").modal({
                    backdrop: "static"
                });
                $("#spid_update_static").val(result.id);
                $("#spmch_update_input").val(result.mkmc);
                $("#shpgg_update_input").val(result.went);
                $("#shpchd_update_input").val(result.yuany);
                $('.clicktosummernote').html(result.jjbz);
                $('.clicktosummernote').summernote('destroy');
                $("#emp_update_btn").val(result.spid);
            }
        });
    };

    function login() {
        // var oUname=document.getElementById("uname");
        // var oUpass = document.getElementById("upass");
        var loginName=$("#uname").val();
        var loginPassword=$("#upass").val();
        // var oUpass=$("#upass").val();
        $.ajax({
            url:"/nc/sysUser/login/" +loginName+"/"+loginPassword,
            type: 'GET',
            success:function (result) {
                if (result!=null){
                    $("#empAddModal").modal('hide');
                    window.location.href="/nc/sysNc/list";
                }
            },
            error:function () {
                alert("您好，你输入的用户名和密码不匹配，请核对后重新登录，谢谢您的合作！！！");
                window.location.href="/index";
            }
        })
    }

    <!--注册用户名时前端验证JS-->
    // function unamecheck() {
    //     var oUname=document.getElementById("uname");
    //     var oErrorforuname = document.getElementById("error_box");
    //     oErrorforuname.innerHTML="";
    //     if (oUname.value.length>20||oUname.value.length<5){
    //         oErrorforuname.innerHTML = "用户名长度必须在5~20位之间";
    //         oUname.focus();
    //     } else if(oUname.value.charCodeAt(0) >= 48 && oUname.value.charCodeAt(0) <= 57){
    //         oErrorforuname.innerHTML = "用户名开头不能为数字";
    //         oUname.value="";
    //         oUname.focus();
    //     } else {
    //         for (var i = 0; i < oUname.value.length; i++) {
    //             if ((oUname.value.charCodeAt(i) > 122 || oUname.value.charCodeAt(i) < 97) && (oUname.value.charCodeAt(i) > 57 || oUname.value.charCodeAt(i) < 48)) {
    //                 oErrorforuname.innerHTML = "用户名只能包含小写字母和数字";
    //             }
    //         }
    //     }
    // }
    <!--注册用户名时前端验证JS-->
    // function upasscheck() {
    //     var oUpass=document.getElementById("upass");
    //     var oErrorforupass = document.getElementById("error_box");
    //     oErrorforupass.innerHTML="";
    //     if(oUpass.value.length > 20 || oUpass.value.length < 6){
    //         oErrorforupass.innerHTML = "密码长度必须在6~20位之间";
    //         oUpass.focus();
    //     }
    // }
</script>
<body class="gray-bg" style="height: auto">
<!--点击logo后打开的模态框-->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static"
     data-keyboard="false">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">系统管理员登录</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div id="error_box"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <input type="text" name="loginName" class="form-control" id="uname"
                                   placeholder="请输入账户名">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="password" name="loginPassword" class="form-control" id="upass"
                                   placeholder="请输入密码">
                            <span class="help-block"></span>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_save_btn" onclick="login()">登录</button>
            </div>
        </div>
    </div>
</div>

<!--点击显示详细信息模态框，我按模板-->
<div class="modal fade" id="myModal5" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static"
     data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">热点问题详细信息</h4>
            </div>
            <div class="modal-body">
                <!--<p><strong>RuoYi</strong>是一个完全响应式，基于Bootstrap3.3.6最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了最新的jQuery版本(v2.1.1)，当然，也集成了很多功能强大，用途广泛的jQuery插件，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。</p>-->
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">问题序号</label>
                        <div class="col-sm-10">
                            <input type="text" disabled name="spid" class="form-control" id="spid_update_static">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">模块名称</label>
                        <div class="col-sm-10">
                            <input type="text" disabled name="spmch" class="form-control" id="spmch_update_input">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">问题名称</label>
                        <div class="col-sm-10">
                            <input type="text" disabled name="shpgg" class="form-control" id="shpgg_update_input">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">问题原因</label>
                        <div class="col-sm-10">
                            <input type="text" disabled name="shpchd" class="form-control" id="shpchd_update_input">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">解决办法</label>
                        <div class="col-sm-10">
                            <div class="clicktosummernote" style="background:#f5f5f5; color:#000000;border: #f5f5f5 solid 12px" disabled></div>
                            <span class="help-block"></span>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>


<!--显示海王logo-->
<header>
    <div class="header">
        <div class="commonweb clearfix">
            <h1 style="color: #0d8ddb">
                <a data-toggle="modal" data-target="#empAddModal">
                    &nbsp&nbsp&nbsp<img style="margin-top: -15px" src="/img/logo.png"/>
                </a><span style="margin-left: 100px;text-align:center ; font:bold 32px 'MicroSoft YaHei';">安徽海王国安医药有限公司NC系统问题展示模块</span>
            </h1></div>
    </div>
</header>

<!--页面展示部分-->
<div class="wrapper wrapper-content animated fadeIn" style="margin-top: -10px">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>模块名称
                        <small>自定义背景</small>
                    </h5>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="panel panel-mdz">
                                <div class="panel-heading">
                                    <i class="fa fa-bandcamp"></i> 采购
                                </div>
                                <div class="panel-body" style="height:120px">
                                    <div class="text-left" style="margin: 1px auto"
                                         th:each="sysNclist101 : ${sysNclist101}"><span>✲</span><a th:text="${sysNclist101.went}"
                                                                                     data-toggle="modal"
                                                                                     th:id="${sysNclist101.id}"
                                                                                     th:value="${sysNclist101.id}"
                                                                                     onclick="updatetjmtk(this)"
                                                                                     data-target="#myModal5"></a></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="panel panel-primary">
                                <div class="panel-heading">
                                    <i class="fa fa-cc-visa"></i> 销售
                                </div>
                                <div class="panel-body" style="height: 120px">
                                    <div class="text-left" style="margin: 1px auto"
                                         th:each="sysNclist201 : ${sysNclist201}"><span>✲</span><a th:text="${sysNclist201.went}"
                                                                                     data-toggle="modal"
                                                                                     th:id="${sysNclist201.id}"
                                                                                     th:value="${sysNclist201.id}"
                                                                                     onclick="updatetjmtk(this)"
                                                                                     data-target="#myModal5"></a></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="panel panel-success">
                                <div class="panel-heading">
                                    <i class="fa fa-file"></i> 资料
                                </div>
                                <div class="panel-body" style="height: 120px">
                                    <div class="text-left" style="margin: 1px auto"
                                         th:each="sysNclist301 : ${sysNclist301}"><span>✲</span><a th:text="${sysNclist301.went}"
                                                                                     data-toggle="modal"
                                                                                     th:id="${sysNclist301.id}"
                                                                                     th:value="${sysNclist301.id}"
                                                                                     onclick="updatetjmtk(this)"
                                                                                     data-target="#myModal5"></a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="panel panel-info">
                                <div class="panel-heading" >
                                    <i class="fa fa-info-circle"></i> 库存
                                </div>
                                <div class="panel-body" style="height: 120px">
                                    <div class="text-left"  style="margin: 1px auto"
                                         th:each="sysNclist401 : ${sysNclist401}"><span>✲</span><a th:text="${sysNclist401.went}"
                                                                                     data-toggle="modal"
                                                                                     th:id="${sysNclist401.id}"
                                                                                     th:value="${sysNclist401.id}"
                                                                                     onclick="updatetjmtk(this)"
                                                                                     data-target="#myModal5"></a></div>
                                </div>

                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="panel panel-warning">
                                <div class="panel-heading">
                                    <i class="fa fa-warning"></i> 财务
                                </div>
                                <div class="panel-body" style="height: 120px">
                                    <div class="text-left" style="margin: 1px auto"
                                         th:each="sysNclist501 : ${sysNclist501}"><span>✲</span><a th:text="${sysNclist501.went}"
                                                                                     data-toggle="modal"
                                                                                     th:id="${sysNclist501.id}"
                                                                                     th:value="${sysNclist501.id}"
                                                                                     onclick="updatetjmtk(this)"
                                                                                     data-target="#myModal5"></a></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="panel panel-danger">
                                <div class="panel-heading">
                                    查询
                                </div>
                                <div class="panel-body" style="height: 120px">
                                    <div class="text-left" style="margin: 1px auto"
                                         th:each="sysNclist601 : ${sysNclist601}"><span>✲</span><a th:text="${sysNclist601.went}"
                                                                                     data-toggle="modal"
                                                                                     th:id="${sysNclist601.id}"
                                                                                     th:value="${sysNclist601.id}"
                                                                                     onclick="updatetjmtk(this)"
                                                                                     data-target="#myModal5"></a></div>
                                </div>
                                <!--<div class="panel-footer">-->
                                <!--面板Footer-->
                                <!--</div>-->
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>


<!--<div class="panel-body form-group" style="margin-bottom:0px;">-->
    <!--<label class="col-sm-1 control-label" style="text-align: right; margin-top:5px" >问题名称：</label>-->
    <!--<div class="col-sm-2">-->
        <!--<input type="text" class="form-control" name="went" id="search_name"/>-->
    <!--</div>-->
    <!--<div class="col-sm-1 col-sm-offset-4">-->
        <!--<button class="btn btn-primary" id="search_btn">查询</button>-->
    <!--</div>-->
<!--</div>-->

<div class="btn-group" id="toolbar" role="group">
    <p class="btn btn-success">
        <span class="fa fa-pencil"></span> 点击每条记录前的加号可以查看详细信息
    </p>
</div>

<div class="container-div">
    <div class="row">
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" data-mobile-responsive="true"></table>
        </div>
    </div>
</div>

<th:block th:include="include :: footer"/>
<!--<style>-->
    <!--.select,-->
    <!--#locale {-->
        <!--width: 100%;-->
    <!--}-->

    <!--.like {-->
        <!--margin-right: 10px;-->
    <!--}-->
<!--</style>-->
<script type="text/javascript">
    
    var now = getNow();
    watermark({"watermark_txt":"A B C X Y Z "+now});

    $(document).ready(function () {
        initUserTable();
        function initUserTable() {
            $("#bootstrap-table").bootstrapTable({
                // toolbar: '#toolbar',
                // search: true,
                // showRefresh: true,
                // showToggle: true,
                // showFullscreen: true,
                // showColumns: true,
                // showColumnsToggleAll: true,
                // detailView: true,
                // showExport: true,
                // clickToSelect: true,
                // detailFormatter: "detailFormatter",
                // minimumCountColumns: "2",
                // showPaginationSwitch: true,
                // pagination: true,
                // idField: "id",
                // pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
                // showFooter: true, //是否显示列脚
                // sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
                // url: "/nc/sysNc/getsysNc/",
                // responseHandler: "responseHandler",
                // // modalName: "商品信息",
                // // method:"post",
                // striped: true,
                // // showHeader: true,
                // // cache: false,
                // cardView: false,                    //是否显示详细视图
                // paginationLoop: true,
                // paginationPreText: '上一页',
                // paginationNextText: '下一页',
                // pageNumber: 1, //初始化加载第一页，默认第一页
                // pageSize: 10, //每页的记录行数（*）
                //
                // responseHandler: "responseHandler",
                //
                // contentType: "application/json",//请求数据内容格式 默认是 application/json 自己根据格式自行服务端处理
                // dataType: "json",
                toolbar: '#toolbar',
                search: true,//是否显示搜索框
                showToggle: true,//是否切换显示
                showColumns: true,//是否显示列，
                showColumnsToggleAll: true,
                detailView: true,//和下面的属性成对设置，是否显示加号显示详细信息
                detailFormatter: "detailFormatter",
                showExport:true,//是否导出
                showPaginationSwitch: true,//切换是否分页显示
                showFooter: true,//是否显示页脚，主要用途是显示汇总的信息
                striped: false,//是否显示行间隔色
                paginationPreText: '上一页',
                paginationNextText: '下一页',

                method:'get',
                url: "/nc/sysNc/getUserListPage/",
                striped : true,
                pageNumber : 1,
                pagination : true,//是否分页
                sidePagination : 'client',//server:服务器端分页|client：前端分页
                pageSize : 10,//单页记录数
                pageList : [ 10, 20, 30 ],//可选择单页记录数
                showRefresh : true,//刷新按钮
                queryParams : function(params) {//上传服务器的参数
                    var temp = {//如果是在服务器端实现分页，limit、offset这两个参数是必须的
                        // limit : params.limit, // 每页显示数量
                        // offset : params.offset, // SQL语句起始索引
                        //page : (params.offset / params.limit) + 1, //当前页码
                        went : $('#search_name').val(),
                        // Tel : $('#search_tel').val()
                    };
                    return temp;
                },
                columns: [{
                        checkbox:true},
                    // {
                    //     field: 'id',
                    //     title: '问题id号',
                    // },
                    // {
                    //     field: 'xh',
                    //     title: '问题序号'
                    // },
                    {
                        field: 'mkmc',
                        title: '模块名称'
                    },
                    {
                        field: 'went',
                        title: '问题名称',
                        sortable: true,
                    },
                    {
                        field: 'yuany',
                        title: '问题原因'
                    },
                    // {
                    //     field: 'jjbz',
                    //     title: '解决步骤'
                    // },
                    {
                        field: 'beiz',
                        title: '备注'
                    }
                    // ,
                    // {
                    //     field: 'guanjz',
                    //     title: '关键字'
                    // },
                    // {
                    //     field: 'isRd',
                    //     title: '是否热点'
                    // },
                    // {
                    //     field: 'isJs',
                    //     title: '是否技术'
                    // },
                    // {
                    //     field: 'mkid',
                    //     title: '模块id号'
                    // }
                ]
            })
        }
    });
    //value代表该列的值，row代表当前对象
    // function formatSex(value, row, index) {
    //     return value == 1 ? "男" : "女";
    //     //或者 return row.sex == 1 ? "男" : "女";
    // }
    //删除、编辑操作
    function operation(value, row, index) {
        var htm = "<button>删除</button><button>修改</button>"
        return htm;
    }
    //查询按钮事件
    $('#search_btn').click(function() {
        $('#bootstrap-table').bootstrapTable('refresh', {
            url : '/nc/sysNc/getUserListPage/'
        });
    })
    function getIdSelections() {
        return $.map($table.bootstrapTable('getSelections'), function (row) {
            return row.id
        })
    }
    function responseHandler(res) {
        $.each(res.rows, function (i, row) {
            row.state = $.inArray(row.id, selections) !== -1
        })
        return res
    }
    function detailFormatter(index, row) {
        var html = []
        $.each(row, function (key, value) {
            html.push('<p><b>' + key + ':</b> ' + value + '</p>')
        })
        return html.join('')
    }
</script>
</body>
</html>